<template>
  <div class="public_height100 p20 pub_bgColorFFF">
    <div class="crumbs flex_start">
      <span class="crumbs_active" @click="goPage('layout/orderManagement')">订单管理</span>
      <img src="@/assets/img/customer/crumbs_next.png" alt="返回" class="pub_imgSize16 ml8" />
      <span class="ml8 crumbs_active" @click="goPage('layout/orderInfo')">订单信息</span>
      <img src="@/assets/img/customer/crumbs_next.png" alt="返回" class="pub_imgSize16 ml8" />
      <span class="ml8 ">库存列表</span>
    </div>
    <div class="table_filter flex_space_between mt12">
      <div class="flex_start ">
        <div class="table_filter_search w400">
          <el-input v-model="params.commonSearch" class="pub_input pub_input_search" placeholder="搜索货号、产品名称、品牌、供应商" clearable @keydown.enter.native="handleSearch" @clear="handleSearch">
            <img slot="prefix" src="@/assets/img/orderManagement/search.png" class="pub_imgSize16" />
          </el-input>
        </div>
      </div>
      <div class="flex_start flex_end">
        <div>
          <el-button type="text" class="w108 pub_button pub_buttonGreen" @click="goPage('layout/chooseProduct')">
            <img src="@/assets/img/orderManagement/add.png" alt="添加规格" />
            <span class="ml5">添加库存</span>
          </el-button>
        </div>
      </div>
    </div>
    <el-table ref="multipleTable" size="mini" :data="tableData" tooltip-effect="dark" border :height="`calc(100% - ${180 * $f}px)`" class="wp100 mt12">
      <el-table-column label="库存编码" show-overflow-tooltip prop="productBatchNo" :width="`${80 * $f}`" align="center" />
      <el-table-column label="品牌" show-overflow-tooltip prop="productBrandName" :width="`${100 * $f}`" align="center" />
      <el-table-column label="产品名称" show-overflow-tooltip prop="productBrandArticleNoName" align="center" />
      <el-table-column label="公司名称" show-overflow-tooltip prop="companyName" :width="`${150 * $f}`" align="center" />
      <el-table-column label="供应商" show-overflow-tooltip prop="productSupplierName" :width="`${140 * $f}`" align="center" />
      <el-table-column label="货号" show-overflow-tooltip prop="productBrandArticleNo" :width="`${180 * $f}`" align="center" />
      <el-table-column label="单价" show-overflow-tooltip prop="singlePrice" :width="`${100 * $f}`" align="center" />
      <el-table-column label="数量" show-overflow-tooltip :width="`${80 * $f}`" align="center">
        <template slot-scope="{ row }">
          {{ Number(row.qty).toFixed(0) }}
        </template>
      </el-table-column>
      <el-table-column label="单位" show-overflow-tooltip prop="unit" :width="`${60 * $f}`" align="center" />
      <el-table-column label="规格" show-overflow-tooltip prop="productSpecificationName" :width="`${200 * $f}`" align="center" />
      <el-table-column label="税收编码" show-overflow-tooltip prop="taxCode" :width="`${180 * $f}`" align="center" />
      <el-table-column label="选中" :width="`${80 * $f}`" align="center">
        <template slot-scope="{ row }">
          <img v-if="row.selected === false" class="public_singImg" src="@/assets/img/orderManagement/unchecked_icon.png" @click="selectedProduct(row)" />
          <img v-else class="public_singImg" src="@/assets/img/orderManagement/checked_icon.png" @click="selectedProduct(row)" />
        </template>
      </el-table-column>
      <template slot="empty">
        <PageEmptyData />
      </template>
    </el-table>
    <div class="pub_pageination flex_center mt12">
      <el-pagination background :page-size="params.pageSize" :current-page.sync="params.pageNum" layout="total,prev, pager, next,sizes" :total="params.total" @current-change="changePage" @size-change="changeSize"> </el-pagination>
    </div>
    <div class="mt12 fle">
      <el-button type="text" class="public_e0e2e7_btn pub_button" @click="handleClose">取消</el-button>
      <el-button type="text" class="public_confirm_btn pub_button" @click="submitBtnClick"> 提交 </el-button>
    </div>
  </div>
</template>
<script>
import { debounce } from '@/utils/debounce';
import tableFun from '@/mixin/tableFun.js';
import stockList from '@/mixin/stockList.js';
export default {
  mixins: [tableFun, stockList],
  data() {
    return {
      params: {
        commonSearch: '',
        total: 0,
        isZero: '2',
        pageSize: 10,
        pageNum: 1
      },
      sourceType: null //1：新增订单 2：编辑 3：查看详情
    };
  },
  async created() {
    this.sourceType = this.$route.query.sourceType;
    await this.getDataList();
    let productList = window.sessionStorage.getItem('productList'); //商品信息
    if (productList) {
      productList = JSON.parse(productList);
      productList.forEach((val, index) => {
        val.index = index;
        val.inventoryId = val.id;
      });
    } else {
      productList = [];
    }
    this.tableData.forEach(el => {
      let idx = productList.findIndex(son => son.id === el.id);
      if (idx === -1) {
        this.$set(el, 'selected', false);
      } else {
        this.$set(el, 'selected', true);
      }
    });
  },
  methods: {
    //页面跳转
    goPage(pageUrl) {
      this.$router.push({ path: '/' + pageUrl, query: { sourceType: this.sourceType, activeIndex: '1' } });
    },
    handleClose() {
      this.goPage('layout/orderInfo');
    },
    submitBtnClick: debounce(function() {
      let prodcutInfo = this.tableData.filter(item => item.selected);
      if (prodcutInfo.length === 0) {
        return this.$message.warning('请选择产品');
      }
      let productList = window.sessionStorage.getItem('productList');
      if (productList) {
        productList = JSON.parse(productList);
      } else {
        productList = [];
      }
      prodcutInfo.forEach(el => {
        let idx = productList.findIndex(son => son.productBatchNo === el.productBatchNo);
        if (idx === -1) {
          productList.push(el);
        }
      });
      // 保存原始数量到qtyNum字段，同时清空qty字段以便用户重新输入
      productList.forEach(el => {
        el.qtyNum = el.qty;
        el.qty = '';
      });
      window.sessionStorage.setItem('productList', JSON.stringify(productList));
      this.handleClose();
    }, 500)
  }
};
</script>
<style lang="less" scoped>
.pub_table {
  height: auto;
}
</style>
